<template>
    <div>
        <router-view to="/jiesuan"></router-view>
        <div class="box">
            <h3>老百姓大药房</h3>
            <input type="text">
            <div class="box2">
                <button v-for="(item, index) in btn_arr" :key="item.id" @click="tap(index)">{{ item }}</button>
                <ul class="goods_list">
                    <li v-for="(item) in show_list" :key="item.id">
                        <img :src="item.img">
                        <p>{{ item.p }}</p>
                        <span>￥{{ item.price
                            }}</span>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
                        <button @click="addercar(item.id)">+</button>
                    </li>
                </ul>

            </div>
            <div class="footer">
                <button @click="kaicar()">购物车</button>
            </div>
            <div class="car" v-show="caris">
                <button @click="jiesuan()">去结算</button>
                <ul>
                    <li>总价：{{ allmoney }}</li>
                    <li v-for="(item) in car_list" :key="item.id">
                        <input type="checkbox" @change="xuan(item.id)">
                        <img :src="item.img">
                        <p>{{ item.name }}</p>
                        <span>￥{{
                            item.price }}</span>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
                        <button @click="jian(item.id)">-</button>
                        <span>{{ item.num }}</span>
                        <button @click="jia(item.id)">+</button>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
// import CarView from "@/views/CarView.vue"
export default {
    //     components:{
    // CarView
    //     },
    data() {
        return {
            caris: false,
            btn_arr: ["药品一", "药品二", "药品三"],
            car_list: [],
            show_list: [{
                name: "商品1",
                id: 1,
                price: 100,
                p: "商品内容111",
                img: "https://ts1.tc.mm.bing.net/th/id/OIP-C.oJvK5UVRT7cRVcPYh4fMOQHaDQ?w=284&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2",
                pid: 0
            }, {
                name: "商品2",
                id: 2,
                price: 200,
                p: "商品内容222",
                img: "https://ts1.tc.mm.bing.net/th/id/OIP-C.oJvK5UVRT7cRVcPYh4fMOQHaDQ?w=284&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2",
                pid: 0
            },],
            goods_list: [{
                name: "商品1",
                id: 1,
                price: 100,
                p: "商品内容111",
                img: "https://ts1.tc.mm.bing.net/th/id/OIP-C.oJvK5UVRT7cRVcPYh4fMOQHaDQ?w=284&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2",
                pid: 0
            }, {
                name: "商品2",
                id: 2,
                price: 200,
                p: "商品内容222",
                img: "https://ts1.tc.mm.bing.net/th/id/OIP-C.oJvK5UVRT7cRVcPYh4fMOQHaDQ?w=284&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2",
                pid: 0
            }, {
                name: "商品3",
                id: 3,
                price: 300,
                p: "商品内容333",
                img: "https://ts1.tc.mm.bing.net/th/id/OIP-C.oJvK5UVRT7cRVcPYh4fMOQHaDQ?w=284&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2",
                pid: 1
            }, {
                name: "商品4",
                id: 4,
                price: 400,
                p: "商品内容444",
                img: "https://ts1.tc.mm.bing.net/th/id/OIP-C.oJvK5UVRT7cRVcPYh4fMOQHaDQ?w=284&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2",
                pid: 1
            }, {
                name: "商品5",
                id: 5,
                price: 500,
                p: "商品内容555",
                img: "https://ts1.tc.mm.bing.net/th/id/OIP-C.oJvK5UVRT7cRVcPYh4fMOQHaDQ?w=284&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2",
                pid: 2
            }, {
                name: "商品6",
                id: 6,
                price: 600,
                p: "商品内容666",
                img: "https://ts1.tc.mm.bing.net/th/id/OIP-C.oJvK5UVRT7cRVcPYh4fMOQHaDQ?w=284&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2",
                pid: 2
            },]
        }
    },
    created() {
    },
    computed: {
        allmoney() {
            var a = 0
            this.car_list.forEach(item => {
                if (item.is == true) {
                    a += item.num * item.price
                }
            })
            return a
        }
    },
    methods: {
        tap(index) {
            this.show_list = []
            this.goods_list.filter(item => {
                if (item.pid == index) {
                    this.show_list.push(item)
                }
            })
        },
        addercar(id) {
            var a = this.goods_list.findIndex(item => item.id == id)
            if (this.car_list.every(item => item.id != id)) {
                this.car_list.push({
                    name: this.goods_list[a].name,
                    id: this.goods_list[a].id,
                    price: this.goods_list[a].price,
                    p: this.goods_list[a].p,
                    img: this.goods_list[a].img,
                    num: 1,
                    is: false
                })
            } else {
                var c = this.car_list.findIndex(item => item.id == id)
                this.car_list[c].num++
            }

        },
        kaicar() {
            this.caris = true
        },
        jian(id) {
            var a = this.car_list.findIndex(item => item.id == id)
            if (this.car_list[a].num > 1) {
                this.car_list[a].num--
            } else {
                alert("商品数量最少为1")
            }
        },
        jia(id) {
            var a = this.car_list.findIndex(item => item.id == id)
            this.car_list[a].num++
        },
        xuan(id) {
            var a = this.car_list.findIndex(item => item.id == id)
            this.car_list[a].is = !this.car_list[a].is
        },
        jiesuan() {
            this.$router.push("/jiesuan")
            localStorage.setItem("arr", JSON.stringify(this.car_list))
        }
    },
}
</script>
<style lang="less" scoped>
* {
    padding: 0;
    margin: 0;
}

li {
    list-style: none;
}

.box {
    position: relative;
    width: 620px;
    height: 700px;
    margin: auto;
    border: 2px black solid;
    overflow: scroll;
}

input {
    width: 100%;
}

.goods_list {
    li {
        display: block;
        width: 280px;
        height: 300px;
        float: left;
        margin: 10px;
        background: rgb(174, 229, 255);
    }

    p {
        font-size: 24px;
        font-weight: bold;
        line-height: 30px;
        margin: 15px 0 15px;
    }

    span {
        color: red;
    }

    img {
        width: 280px;
        height: 200px;
    }

    button {
        width: 30px;
    }
}

ul::after {
    content: "";
    display: block;
    clear: both;
}

.car {
    width: 600px;
    height: 400px;
    background: yellow;
    overflow: scroll;
    position: absolute;
    bottom: 0;

    li {
        height: 130px;
        border: 3px red dashed;
        margin: 20px 0;
    }

    img {
        height: 50px;
    }

    button {
        width: 50px;
    }
}

.footer {
    width: 100%;
    height: 50px;
    position: absolute;
    bottom: 0;

    button {
        width: 100%;
        height: 50px;
        font-size: 24px;
        background-color: aqua;
    }
}
</style>
